<template>
  <div>
    <v-curd title="抬头类型">
      <div class="title">
        <b
          v-for="(v, i) in typeList"
          :key="i"
          :class="i === activeIndex ? 'active' : ''"
          @click="change(i)"
        >{{ v }}</b>
      </div>
    </v-curd>
    <v-curd title="抬头名称">
      <v-input v-model="typename" type="text"></v-input>
    </v-curd>
    <v-curd title="税号" v-if="activeIndex !== 2">
      <v-input v-model="code" type="text"></v-input>
    </v-curd>
    <v-curd title="邮箱">
      <v-input v-model="email" type="text"></v-input>
    </v-curd>
    <v-curd title="需要增值税专用发票" v-if="activeIndex !== 2">
      <v-switch v-model="isRequire"></v-switch>
    </v-curd>
    <v-curd title="设置为默认发票">
      <v-switch v-model="isDefault"></v-switch>
    </v-curd>
    <button @click="add">提交发票</button>
  </div>
</template>

<script>
import Curd from '../components/curd'
import Input from '../components/input'
import Switch from '../components/switch'
export default {
  data() {
    return {
      typename: '',
      email: '',
      isDefault: false,
      isRequire: false,
      code: '',

      typeList: ['企业', '非企业', '个人'],
      activeIndex: 0,
    }
  },
  computed: {
    type() {
      if (this.activeIndex === 0) return '企业'
      if (this.activeIndex === 1) return '非企业'
      return '个人'
    }
  },
  methods: {
    change(i) {
      // 切换高亮
      this.activeIndex = i
    },
    add() {
      const item = {
        type: this.type,
        name: this.typename,
        isDefault: this.isDefault,
        code: this.code,
        email: this.email,
        id: new Date().getTime()
      }

      this.$store.commit('ADD_LIST', item)
      this.$router.push('/')
    }
  },
  components: {
    'v-curd': Curd,
    'v-input': Input,
    'v-switch': Switch
  }
}
</script>

<style scoped>
.active {
  color: red;
}

b {
  padding: 0 10px;
}
</style>